<template>
  <SearchTablePage
    :search-config="baseTableSearchModel"
    :table-config="baseTableModel"
  />
</template>

<script lang="ts" setup>
defineOptions({
  name: "SysDicPageData", //全局别名
  title: "表格页", //标题
});
// 接口
import SysDicApi from "/@/api/webPath/SysDicApi.ts";

import FORM_FIELD_TYPE from "/@/constants/FormFieldType";
import VDialog from "/@/utils/dialogUtil.ts";

const router = useRouter();
const baseTable = ref(null as any);
const baseTableSearch = ref(null as any);
const editRef = ref<any>(null);

// 表格搜索初始化searchModel
const baseTableSearchModel = ref({
  columnCount: 4,
  expandLimit: 6,
  autoFit: true,
  columnWidth: "300px",
  labelPosition: "right",
  labelWidth: "100px",
  items: [
    //搜索项初始化

    {
      label: "id",
      field: "id",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",
    },

    {
      label: "字典类型",
      field: "dicClass",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",
    },

    {
      label: "字典类型名称",
      field: "dicClassName",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",
    },

    {
      label: "字典类型子类",
      field: "dicClassType",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",
    },

    {
      label: "字典类型子类名称",
      field: "dicClassTypeName",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",
    },

    {
      label: "创建人",
      field: "creator",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",
    },

    {
      label: "修改人",
      field: "reviser",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",
    },

    {
      label: "创建时间",
      width: 200,
      field: "create_time",
      clearable: true,
      type: FORM_FIELD_TYPE.DATE_RANGE,
      placeholder: "请输入",

      config: {
        props: {
          //日期精度配置
          type: "daterange",
          startPlaceholder: "开始日期",
          endPlaceholder: "结束日期",
          format: "YYYY-MM-DD",
        },
      },
    },
  ],

  buttons: [
    //功能区域
    {
      name: "新增",
      buttonClass: "primary",
      width: 100,
      click: ({ row, handlers }) => {
        // 点击回调事件方法钩子，  点击触发

        VDialog.open({
          title: "新增",

          content: {
            //内容初始形式
            type: "component", //text:"",预留文本
            name: "/sysDic/edit",
            query: {},
          },

          callBack: (data: any) => {
            handlers.refresh();
          },
          onClose: () => {
            console.log("对话框已关闭");
          },
        });
      },
    },
    {
      name: "批量删除",
      buttonClass: "danger",
      width: 100,
      isShow: (row: any) => {
        return false;
      },
      click: () => {
        //暴露的方法钩子
        console.log(baseTable.value.getSelection());
      },
    },
  ],
});
// 表格初始化Model
const baseTableModel = ref({
  border: true,
  pagination: true,
  inline: true,
  selectable: true,
  isFullscreen: false,
  minWidth: "200px",
  data: {
    //table  初始化
    current: 1,
    size: 10,
    total: 100,
    data: [],
  },
  requestData: { api: SysDicApi.getPageData, query: {} }, //数据源 参数有效性： 'steady|transient'
  columns: [
    {
      label: "id",
      field: "id",
      width: 100,
    },

    {
      label: "排序",
      field: "sort",
      width: 120,
    },
    {
      label: "字典类型",
      field: "dicClass",
      tooltip: true,
      width: 180,
    },
    {
      label: "字典类型名称",
      field: "dicClassName",
      tooltip: true,
      width: 180,
    },
    {
      label: "字典类型子类",
      field: "dicClassType",
      tooltip: true,
      width: 180,
    },
    {
      label: "字典类型子类名称",
      field: "dicClassTypeName",
      tooltip: true,
      width: 180,
    },
    {
      label: "创建人",
      field: "creator",
      tooltip: true,
      width: 180,
    },
    {
      label: "修改人",
      field: "reviser",
      tooltip: true,
      width: 180,
    },
    {
      label: "创建时间",
      field: "create_time",
      tooltip: true,
      width: 200,
    },
    {
      label: "修改时间",
      field: "update_time",
      tooltip: true,
      width: 200,
    },
  ],

  actions: [
    {
      name: "详情",

      buttonClass: "primary",
      buttonType: "text",
      click: ({ row, index, handlers }) => {
        //router.push({name: 'CompanyInfoDetail',})
        VDialog.open({
          title: "详情",
          content: {
            //内容初始形式
            type: "component", //text:"",预留文本
            name: "/sysDic/detail",
            query: { sysDicId: row.id },
          },
          callBack: (data: any) => {
            handlers.refresh();
          },
          onClose: () => {
            console.log("对话框已关闭");
          },
        });
      },
      isShow: (row: object) => {
        return true;
      },
      fixed: "right",
    },
    {
      name: "编辑",
      buttonClass: "primary", //按钮颜色控制
      buttonType: "text", // 按钮风格   text  link  button
      isShow: (row: object) => {
        //根据业务做动态隐藏张氏
        return true;
      },
      click: ({ row, index, handlers }) => {
        // 点击回调事件方法钩子，  点击触发

        VDialog.open({
          title: "编辑",
          content: {
            //内容初始形式
            type: "component", //text:"",预留文本
            name: "/sysDic/edit",
            query: { sysDicId: row.id },
          },

          callBack: (data: any) => {
            handlers.refresh();
          },
          onClose: () => {
            console.log("对话框已关闭");
          },
        });
      },
      fixed: "right",
    },

    {
      name: "删除",
      buttonClass: "danger",
      buttonType: "text",
      fixed: "right",
      click: ({ row, index, handlers }) => {
        $baseConfirm("您确定要删除当前项吗", null, async () => {
          const { message } = await SysDicApi.del({ sysDicIds: row.id });
          $baseMessage(message, "success", "vab-hey-message-success");

          handlers.refresh();
        });
      },
    },
  ],
});

onActivated(() => {});
</script>
